<template>
  <view class="wrap">
    <view class="backImage">
      <image src="../../static/signImage.png" mode="widthFix" class="img"></image>
    </view>
    <view class="nav">
      <uv-navbar :fixed="false" title="报名调研" autoBack safeAreaInsetTop placeholder :border='false' bg-color="rgba(0,0,0,0)" titleStyle='color: #FFFFFF' leftIconColor='#FFFFFF'></uv-navbar>
    </view>
    <view class="box">
      <view class="form">
        <view class="item">
          <view class="left">姓名<text class="red">*</text></view>
          <view class="right">
            <uv-input v-model="opt.name" placeholder="请输入真实姓名" border="none" autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
          </view>
        </view>
        <view class="item">
          <view class="left">任职机构</view>
          <view class="right">
            <uv-input v-model="opt.company_name" placeholder="请输入任职机构" border="none" autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
          </view>
        </view>
        <view class="item">
          <view class="left">职位</view>
          <view class="right">
            <uv-input v-model="opt.job" placeholder="请输入职位" border="none" autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
          </view>
        </view>
        <view class="item">
          <view class="left">参会手机<text class="red">*</text></view>
          <view class="right">
            <uv-input type='number' v-model="opt.mobile" placeholder="请输入职位" border="none" maxlength='11' autoBlur readonly fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
          </view>
        </view>
        <view class="item">
          <view class="left">是否外呼<text class="red">*</text></view>
          <view class="radio">
            <view class="check" @click="opt.outbound = 1">
              <image src="../../static/radio-off.png" class="img" v-if="opt.outbound == 0"></image>
              <image src="../../static/radio-on.png" class="img" v-if="opt.outbound == 1"></image>
              <view class="test">需要</view>
            </view>
            <view class="check" @click="opt.outbound = 0">
              <image src="../../static/radio-off.png" class="img" v-if="opt.outbound == 1"></image>
              <image src="../../static/radio-on.png" class="img" v-if="opt.outbound == 0"></image>
              <view class="test">不需要</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <button class="btn" hover-class="none" @click="keyUp">提交</button>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { post } from '@/api';
import { onLoad } from '@dcloudio/uni-app';
import { useUser } from '@/store';
import { toast } from '@/common';

let opt = ref({
  id: '',
  name: '',
  company_name: '',
  job: '',
  mobile: '',
  outbound: 0
});
let free = '';
const store = useUser();
const userDetail = store.userDetail;
opt.value.mobile = userDetail.mobile;
opt.value.name = userDetail.real_name;

onLoad((option) => {
  opt.value.id = option.id;
  free = Number(option.free);
  console.log(free);
  getCert();
})

function keyUp(){
  if(!opt.value.name) return toast('请输入姓名');
  if(!opt.value.mobile) return toast('请输入手机号');
  if(free == 1){
    post('/api/Live/enrollStore', opt.value).then(res => {
      if(res.code == 1){
        toast('报名成功');
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          });
        }, 1000)
      }
    })
  }else{
    uni.setStorageSync('investValue', opt.value);
    uni.redirectTo({
      url: `/pages/research/cashier2?id=${opt.value.id}`
    });
  }
}
function getCert(){
  post('api/user/getIdentityAuthInfo').then(res => {
    if(res.code == 1){
      const data = res.data;
      if(data){
        opt.value.organ = data.organ;
        opt.value.job = data.job;
      }
    }
  })
}
</script>

<style lang="scss" scoped>
  .safe{
    width: 100%;
    height: 208rpx;
  }
  .footer{
    width: 100%;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 3;
    .btn{
      font-size: 34rpx;
    }
  }
  .box{
    position: relative;
    z-index: 3;
    padding: 0 30rpx;
    padding-top: 50rpx;
    .form{
      width: 100%;
      background: #FFFFFF;
      box-shadow: 0 5rpx 11rpx 0 #ff706d8c;
      border-radius: 15rpx;
      padding: 20rpx 40rpx;
      .item{
        width: 100%;
        height: 100rpx;
        border-bottom: 1px solid #EFEFEF;
        display: flex;
        align-items: center;
        &:last-child{
          border-bottom: 0;
        }
        .radio{
          display: flex;
          align-items: center;
          .check{
            display: flex;
            align-items: center;
            margin-right: 80rpx;
            &:last-child{
              margin-right: 0;
            }
            .test{
              font-weight: 400;
              font-size: 26rpx;
              color: #000000;
              padding-left: 14rpx;
            }
            .img{
              width: 22rpx;
              height: 22rpx;
            }
          }
        }
        .right{
          flex: 1;
          width: 0;
        }
        .left{
          width: 170rpx;
          .red{
            color: red;
          }
        }
      }
    }
  }
  .nav{
    position: relative;
    z-index: 3;
  }
  .backImage{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>